<template>
  <div :class="tdClass">
    <span class="before-line" v-if="root !== 0 && nodes !== 1" :style="{'left':model.bLeft + 'px'}"></span>
    <table>
      <tr>
        <td :colspan="colSpan">
          <table>
              <tr class="leve" :class="levelClass">
								<td v-for="(item, index) in columsAll" :key="index" :class="'td' + (index + 1)">
                  <div v-if="index === 0" class="td-title" @dblclick="handlerExpand(model)">
                    <span v-if="model.children.length > 0" class="tree-close" :class="{'tree-open':model.isExpand}" @click="handlerExpand(model)"></span>
                    <a class="ellipsis">
                      <i class="el-icon-document"></i>
                      <span :title="model[item.id]">{{model[item.id]}}</span>
                    </a>
                  </div>
									<div v-else-if="index === columsAll.length - 1">
										<a class="reset" href="javascript:;" @click="actionFunc(model)">编辑</a>
										<i class="line"></i>
										<a class="delete" href="javascript:;" @click="deleteFunc(model)">删除</a>
									</div>
									<div v-else>
										{{ model[item.id] }}
									</div>
                </td>
              </tr>
          </table>
        </td>
      </tr>
      </table>
      <div v-show="model.isExpand" class="other-node" :class="otherNodeClass">
        <tree-item
          v-for="(m, i) in model.children"
          :key="String('child_node'+i)"
          :num='i'
          :root="1"
          @actionFunc="actionFunc"
          @deleteFunc="deleteFunc"
          @handlerExpand="handlerExpand"
          :nodes.sync='model.children.length'
          :trees.sync='trees'
          :model.sync="m">
        </tree-item>
      </div>
    </div>
</template>

<script>
export default {
  name: 'treeItem',
	props: ['model', 'num', 'nodes', 'root', 'trees'],
	data() {
		return {
			parentNodeModel: null,
			columsAll: []
		}
	},
	computed: {
		colSpan() {
			return this.root === 0 ? '' : 6
		},
		tdClass() {
			return this.root === 0 ? 'td-border' : 'not-border'
		},
		levelClass() {
			return this.model ? 'leve-' + this.model.level : ''
		},
		childNodeClass() {
			return this.root === 0 ? '' : 'child-node'
		},
		otherNodeClass() {
			return this.model ? 'other-node-' + this.model.level : ''
		}
	},
	watch: {
		// 'model': {
		// 	handler() {
		// 		console.log('对象变化', this.model.isExpand)
		// 	},
		// 	deep: true
		// }
	},
	created() {
		this.columsAll = JSON.parse(localStorage.getItem('columsAll'))
	},
	methods: {
		getParentNode(m) {
			// 查找点击的子节点
			var recurFunc = (data, list) => {
				data.forEach((l) => {
					if (l.id === m.id) this.parentNodeModel = list
					if (l.children) {
						recurFunc(l.children, l)
					}
				})
			}
			recurFunc(this.trees, this.trees)
		},
		handlerExpand(m) {
			this.$emit('handlerExpand', m)
		},
		deleteFunc(m) {
			this.$emit('deleteFunc', m)
			// this.getParentNode(m)
			// console.log(this.parentNodeModel)
			// if (this.parentNodeModel.hasOwnProperty('children')) {
			// 	console.log('父级是跟节点', this.parentNodeModel)
			// 	this.parentNodeModel.children.splice(this.parentNodeModel.children.indexOf(m), 1)
			// } else if (this.parentNodeModel instanceof Array) {
			// 	console.log('跟节点', this.parentNodeModel)
			// 	this.parentNodeModel.splice(this.parentNodeModel.indexOf(m), 1)
			// }
		},
		actionFunc(m) {
			this.$emit('actionFunc', m)
		}
	},
	filters: {
		formatDate: function(date) {
			// 后期自己格式化
			return date //Utility.formatDate(date, 'yyyy/MM/dd')
		}
	}
  }
</script>
